<template>  
    <li>  
      {{ todo.text }}  
      <button @click="deleteTodo">Delete</button>  
    </li>  
  </template>  
    
  <script>  
  export default {  
    props: ['todo'],  
    methods: {  
      deleteTodo() {  
        this.$emit('delete', this.todo.id);  
      }  
    }  
  };  
  </script>